<template>
	<router-link :to="`/secGoodsDetail?id=${shopItem.id}`" class="shop-item">
		<div class="picture">
			<img :src="shopItem.logo" alt="">
		</div>	
		<div class="name">{{shopItem.name}}</div>
		<div class="info">
			<div class="shop-item-price">￥{{shopItem.discountPrice|price}}</div>
			<div class="type" v-if="shopItem.type">
				{{shopItem.type}}
			</div>
		</div>
		<div class="address" v-if="shopItem.address">
			{{shopItem.address}}
		</div>
	</router-link>	
</template>
<script>
/** 
 * { 
 * id : ,     商品id
 * price:,    商品价格
 * type?:,		商品类型，可选
 * pic:       商品图片
 * address?:  商品地址，可选
 * },
 */
export default {
	name:'shop-item',
	props:{
		shopItem:{
			type:Object,
			// required:true,
		}
	}
}
</script>
<style lang="less" scoped>
.shop-item{
	width: 100%;
	background: #fff;
	.picture{
		width: 100%;
		img{
				width: 100%;
		}
	}
	.name{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #000000;
		font-size: .4rem /* 30/75 */;
		margin-top: .533333rem /* 40/75 */;
	}
	.info{
		display: flex;
		margin-top: .226667rem /* 17/75 */;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		.shop-item-price{
		color: #ff4444;
		font-size: .4rem /* 30/75 */;
		background: #fff;
		}
		.type{
			width: .933333rem /* 70/75 */;
			height: .426667rem /* 32/75 */;
			background-color: #feefec;
			text-align: center;
			line-height: .426667rem /* 32/75 */;
			font-size: .306667rem /* 23/75 */;
				color: #ff4444;
		}
	}
	.address{
			color: #999999;
			font-size: .266667rem /* 20/75 */;
	}
}
</style>


